<template>
	<view class="address-form-container">
		<view class="address-form-warp">
			<hx-navbar :title="state.form.id ? '修改收货地址' : '新增收货地址'"></hx-navbar>
			<u-form :model="state.form" ref="formRef" label-width="150">
				<u-form-item label="姓名" prop="addresseeName" required
					><u-input v-model="state.form.addresseeName" input-align="right" placeholder="请输入姓名"
				/></u-form-item>
				<u-form-item label="联系电话" prop="telephone" required
					><u-input v-model="state.form.telephone" input-align="right" placeholder="请输入联系电话"
				/></u-form-item>
				<u-form-item label="邮政编码" prop="postalCode"
					><u-input v-model="state.form.postalCode" input-align="right" placeholder="请输入邮政编码"
				/></u-form-item>
				<u-form-item label="收货地址" prop="region" required>
					<template v-slot:right>
						<region-picker @change="regionChange" :value="region">
							<view style="color: #303133; font-size: 28rpx">{{ region[0] + ',' + region[1] + ',' + region[2] }}</view>
						</region-picker>
					</template></u-form-item
				>
				<u-form-item label="详细地址" prop="detailAddress" required
					><u-input v-model="state.form.detailAddress" type="textarea" input-align="right" placeholder="请输入详细地址"
				/></u-form-item>
				<u-form-item label="默认地址" prop="isDefault">
					<template v-slot:right>
						<u-switch v-model="state.checked" active-value="1" inactive-value="0" @change="defaultAddressChange"></u-switch>
					</template>
				</u-form-item>
			</u-form>
		</view>
		<view class="address-form-operation">
			<u-button class="address-form-button" type="primary" @click="submit">保存</u-button>
			<!-- #ifdef MP-WEIXIN -->
			<u-button class="address-form-button" type="success" v-if="!state.form.id" @click="chooseAddress">导入微信地址</u-button>
			<!-- #endif -->
			<u-button class="address-form-button" type="error" v-if="state.form.id" @click="del">删除</u-button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onLoad, onReady } from '@dcloudio/uni-app';
import { saveOrUpdateAddress, getById, delAddress } from '@/api/user/address';
import RegionPicker from '@/components/region-picker/region-picker.vue';
interface State {
	form: {
		id: string;
		addresseeName: string;
		telephone: string;
		postalCode: string;
		isDefault: string;
		provinceName: string;
		cityName: string;
		countyName: string;
		detailAddress: string;
	};
	checked: boolean;
}
const formRef = ref();
const region = ref(['请选择省', '市', '区']);

const state = reactive<State>({
	form: {
		id: '',
		addresseeName: '',
		telephone: '',
		postalCode: '',
		isDefault: '0',
		provinceName: '',
		cityName: '',
		countyName: '',
		detailAddress: '',
	},
	checked: false,
});
const rules = reactive({
	addresseeName: [
		{
			required: true,
			message: '请输入姓名',
			trigger: ['change', 'blur'],
		},
	],
	telephone: [
		{
			required: true,
			message: '请输入联系电话',
			trigger: ['change', 'blur'],
		},
	],
	detailAddress: [
		{
			required: true,
			message: '请输入详细地址',
			trigger: ['change', 'blur'],
		},
	],
});
onLoad((options) => {
	if (options?.id) {
		getDetail(options.id);
	}
});
onReady(() => {
	formRef.value?.setRules(rules);
});
const defaultAddressChange = (val: string) => {
	state.form.isDefault = val;
};
const regionChange = (e: any) => {
	region.value = e.detail.value;
};
const chooseAddress = () => {
	uni.authorize({
		scope: 'scope.address',
		success(res) {
			uni.chooseAddress({
				success(res) {
					state.form.addresseeName = res.userName;
					state.form.telephone = res.telNumber;
					state.form.postalCode = res.nationalCode;
					region.value[0] = res.provinceName;
					region.value[1] = res.cityName;
					region.value[2] = res.countyName;
				},
			});
		},
		fail(res) {
			console.log(res);
		},
	});
};

const getDetail = (id: string) => {
	getById(id).then((response) => {
		state.form = response.data;
		region.value[0] = state.form.provinceName;
		region.value[1] = state.form.cityName;
		region.value[2] = state.form.countyName;
		state.checked = state.form.isDefault === '1';
	});
};

const submit = () => {
	formRef.value.validate((valid: any) => {
		if (valid) {
			if (region.value[0] == '请选择省') {
				return uni.$u.toast('请选择收货地址');
			}
			state.form.provinceName = region.value[0];
			state.form.cityName = region.value[1];
			state.form.countyName = region.value[2];
			saveOrUpdateAddress(state.form).then((res) => {
				uni.navigateBack();
			});
		}
	});
};
const del = () => {
	uni.showModal({
		content: '确认删除地址吗？',
		cancelText: '我再想想',
		success(res) {
			delAddress(state.form.id).then((res) => {
				uni.navigateBack();
			});
		},
	});
};
</script>

<style lang="scss" scoped>
.address-form-container {
	background-color: #fff;
	.address-form-warp {
		padding: 20rpx;
	}
	.address-form-operation {
		width: 100%;
		padding: 20rpx;
		.address-form-button {
			margin: 20rpx;
		}
	}
}
</style>
